<template>
	<view class="content">
		<view class="tab-box">
			<u-tabs :list="tabList" :current="current" item-width="50%" inactive-color="#666666" active-color="#e9c83ce8"
				font-size="28" :active-item-style="activetemStyle" @change="changeTab"></u-tabs>
		</view>
		<view class="tiem-box">
			<view class="time-text">
				<!-- · 更新时间 06-25 -->
			</view>
			<view class="times">
				<view class="time-item" v-for="(item,index) in times" :key="index"
					:class="{'activeCss':activeVar==index}" @click="changtime(index)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				tabList: [{
					name: '订单',
				}, {
					name: '收入',
				}],
				times: ["日", "周", "月"],
				current: 0,
				activeVar: 0,
				activetemStyle: {
					color: "#222"
				},
				dataInfo: {},
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#FFB3B3", "#B7DDFF"],
					padding: [15, 15, 0, 5],
					legend: {},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						tooltip: {

						},
						area: {
							type: "straight",
							bgColor: "#fff",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false
						}
					}
				}
			};
		},
		onReady() {

			this.getData()
		},
		onLoad(option) {
			this.id = option.id;
		},
		methods: {
			// 获取数据
			getData() {
				let that = this;
				let params = {
					show_type: that.current + 1,
					date_type: that.activeVar + 1,
					store_shop_id: that.id
				};
				that.$http_business('store.chartData', params).then(res => {
					if (res.code === 1) {
						that.dataInfo = res.data;
						that.getServerData();
					}
				});
			},
			changeTab(index) {
				this.current = index;
				this.getData();
			},
			changtime(val) {
				this.activeVar = val;
				this.getData();
			},

			getServerData() {
				//模拟从服务器获取数据时的延时
				var that = this;
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接					
					let res = {
						categories: that.dataInfo.categories,
						series: that.dataInfo.series
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style scoped>
	.content {
		background-color: #13114c;
		min-height: 100vh;
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
		margin-top: 30rpx;
	}

	.tab-box {
		margin-bottom: 30rpx;
	}

	.tiem-box {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.time-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.times {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.time-item {
		height: 44rpx;
		width: 88rpx;
		text-align: center;
		line-height: 44rpx;
		border-radius: 220rpx;
		border: 1px solid #DEDEDE;
		margin-left: 16rpx;
	}

	.activeCss {
		height: 44rpx;
		width: 88rpx;
		text-align: center;
		line-height: 44rpx;
		border-radius: 220rpx;
		border: 1px solid rgba(252, 83, 81, 0.3);
		margin-left: 16rpx;
		color: #e9c83ce8;
	}
</style>
